<template>
	<view class="screen-popup">
		<view class="screen-popup" v-if="showScreen">
			<view class="screen" >
				 <view class="header-top flex">
				 	<!-- <uni-data-picker :preload="true" class="selectArea" :localdata="items" popup-title="区域" @change="provinveChange"  @nodeclick="nodeclick" placeholder="请选择省市区">
				 	</uni-data-picker> -->
					<!-- <view class="content">
					        <sl-filter :themeColor="themeColor" :menuList="menuList" @result="pickResult"></sl-filter>
					    </view> -->
						<picker class="select" @change="provinceChange" :value="indexProvince" :range="provinceList" range-key="text" placeholder="市">
							<input type="text" class="uni-input periodName" placeholder="省"  :value="provinceName" :disabled="true"/>
							<text class="popup-close" @click="clear(0)">
								<i class="iconfont iconguanbi2"></i>
							</text>
						</picker>
						<picker class="select" @change="cityChange"   :value="indexCity" :range="cityList" range-key="text">
							<input type="text" class="uni-input periodName" placeholder="市" :value="cityName" :disabled="true"/>
							<text class="popup-close" @click="clear(1)">
								<i class="iconfont iconguanbi2"></i>
							</text>
						</picker>
						
						<picker class="select" @change="areaChange" :value="indexArea" :range="areaList" range-key="text">
							<input type="text" class="uni-input periodName" placeholder="区" :value="areaName" :disabled="true"/>
							<text class="popup-close" @click="clear(2)">
								<i class="iconfont iconguanbi2"></i>
							</text>
						</picker>
				 </view>
				 <view class="header-bottom flex">
				 	<!-- <uni-data-picker class="center-tree"  :localdata="periods" popup-title="期次" placeholder="期次" @change="periodsChange"  @nodeClick="nodeclick">
				 	</uni-data-picker>
					<uni-data-picker :localdata="sections" popup-title="标段" placeholder="标段" @change="sectionsChange"  @nodeClick="nodeclick">
					</uni-data-picker> -->
					
					<picker class="select" @change="periodChange" :value="indexP" :range="periods" range-key="text">
						<input type="text" class="uni-input periodName" :value="periodName" :disabled="true"/>
						<text class="popup-close" @click="clear(3)">
							<i class="iconfont iconguanbi2"></i>
						</text>
					</picker>
					<picker class="select" @change="sectionChange" :value="indexS" :range="sections" range-key="text">
						<input type="text" class="uni-input sectionName" :value="sectionName" :disabled="true"/>
						<text class="popup-close" @click="clear(4)">
							<i class="iconfont iconguanbi2"></i>
						</text>
					</picker>
					<view class="reset select flex-center-h fs-13" @click="reset">
						重置
					</view>
				 </view>
			</view>
				 
			<view class="screen-list">
				<view class="search-list__item" v-for="(item,index) in screenData" :key="index" @click="gotoProject(item)">
					<text>{{ item.projectName}}</text>
					<text>质评：{{ item.score }}</text>
				</view>
			</view>
			<view class="search-page">
				<uni-pagination show-icon="true" :total="total" :current="page.pageNo" @change="pageChange"></uni-pagination>
			</view>
		</view>
		<view class="data-loading" v-else>
			<!-- {{message}} -->
			<!-- <uni-load-more :status="more" :contentText="message"></uni-load-more> -->
		</view>
	</view>
	
</template>

<script>
	import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';
	import { supervisionList , getDistrict, queryListByFieldType} from '@/common/api/map'
	export default {
		name: 'screenPopup',
		 components: {
		            slFilter
		        },
		data() {
		  return {
			 //    more:'loading',
			 //    message:{
				// 	contentrefresh:'正在加载中...'
				// },
			    showScreen:true,
				total: 0,
				page: {
					keyword: '',
					buildPeriod: '',
					districtCode: '',
					tenders: '',
					pageNo: 1,
					pageSize: 10
				},
				// items:[],
				periods:[],
				sections:[],
				screenData:[],
				indexP:0,
				indexS:0,
				periodName:'期次',
				sectionName:'标段',
				resultList:[],//行政区接口返回结果
				provinceName:'',
				cityName:'',
				areaName:'',
				provinceList:[],
				cityList:[],
				areaList:[],
				indexProvince:0,
				indexArea:0,
				indexCity:0,
				provinceCode:'',
				cityCode:'',
				areaCode:''
				  };
				
		},
		mounted() {
			this.getPeriodList();
			this.getSection();
			this.getProvince();
			this.loadProdectList();
			// if(uni.getStorageSync('screenData')){
			// 	console.log(123)
			// 	this.items = uni.getStorageSync('screenData');
			// 	this.loadProdectList();
			// 	this.showScreen = true;
			// }else{
			// 	this.getDistrict();
			// }
		},
		methods: {
			clear(n){
				switch(n){
					case 0: this.clearProvince();
							this.loadProdectList();break;
					case 1: this.clearCity();
							this.loadProdectList();break;
				    case 2: this.clearArea();
				    		this.loadProdectList();break;
				    case 3: this.page.buildPeriod = '';
				            this.periodName = '期次';
				    		this.loadProdectList();break;
					case 4: this.page.tenders = '';
					        this.sectionName = '标段';
							this.loadProdectList();break;
				}
			},
			clearProvince(){//清除省选中
				this.cityList = [];
				this.areaList = [];
				this.provinceName = '';
				this.cityName = '';
				this.areaName = '';
				this.page.districtCode = '';
			},
			clearCity(){//清除市选中
				this.areaList = [];
				this.cityName = '';
				this.areaName = '';
				this.page.districtCode = this.provinceCode;
			},
			clearArea(){//清除区县选中
				this.areaName = '';
				this.page.districtCode = this.cityCode;
			},
			getProvince(){//获取省份数据
				this.getDistrict();
				let result = this.resultList;
				this.provinceList = result;
			},
			provinceChange(e){//选中省份，加载市数据，加载项目数据
				this.clearProvince();
				this.indexProvince = e.target.value;
				this.provinceName = this.provinceList[this.indexProvince].text;
				this.page.districtCode = this.provinceList[this.indexProvince].value;
				this.page.pageNo = 1;
				this.loadProdectList();
				this.getDistrict(this.page.districtCode);
				let result = this.resultList;
				this.cityList = result;
				this.provinceCode = this.page.districtCode;
				
			},
			cityChange(e){//选中市，加载区县数据，加载项目数据
				this.clearCity();
				this.indexCity = e.target.value;
				this.cityName = this.cityList[this.indexCity].text;
				this.page.districtCode = this.cityList[this.indexCity].value;
				this.page.pageNo = 1;
				this.loadProdectList();
				this.getDistrict(this.page.districtCode);
				let result = this.resultList;
				this.areaList = result;
				this.cityCode = this.page.districtCode;
			},
			areaChange(e){//选中区县，加载项目数据
				this.clearArea();
				this.indexArea = e.target.value;
				this.areaName = this.areaList[this.indexArea].text;
				this.page.districtCode = this.areaList[this.indexArea].value;
				this.page.pageNo = 1;
				this.loadProdectList();
				
			},
			periodChange(e){//选中期次，加载项目数据
				this.indexP = e.target.value;
				this.periodName = this.periods[this.indexP].text;
				this.page.buildPeriod = this.periods[this.indexP].value;
				this.loadProdectList();
			},
			sectionChange(e){//选中标段，加载项目数据
				this.indexS = e.target.value;
				this.sectionName = this.sections[this.indexS].text;
				this.page.tenders = this.sections[this.indexS].value;
				this.loadProdectList();
			},
			//期次、标段获取接口
			getQueryList(type){
				let listData = [];
				queryListByFieldType(type).then( res => {
					if(res.code == "20000"){
						res.data.forEach( item => {
							listData.push(Object.assign({},{text:item.label},{value:item.id}));
						})
					}else{
						this.message.contentrefresh = res.message;
					}
				})
				return listData;
			},
			getPeriodList(){//获取期次数据
				this.periods = this.getQueryList("period");
				console.log(this.periods)
			},
			getSection(){//获取标段数据
				this.sections = this.getQueryList("section");
			},
			getDistrict(code){//获取行政区接口
				this.resultList = [];
				getDistrict({code:code}).then( res => {
					if(res.code == "20000"){
						res.data.forEach(item => {
							this.resultList.push(Object.assign({},{text:item.name},{value:item.code}))
						})
					}
				})
				
				
				// let items = []
				// getDistrict().then(res =>{
				// 	if(res.code == "20000"){
				// 		res.data.map( (item,indexP) => {
				// 			items.push(Object.assign({},{text:item.name},{value:item.code},{children:[]}));
				// 			// console.log(items)
				// 			getDistrict({code:item.code}).then( citys =>{
				// 				citys.data.map((city,indexC) => {
				// 					// console.log(items);
				// 					items[indexP].children.push(Object.assign({},{text:city.name},{value:city.code},{children:[]}));
				// 					getDistrict({code:city.code}).then( areas => {
				// 						if(areas.code == "20000"){
				// 							areas.data.forEach(area => {
				// 								items[indexP].children[indexC].children.push(Object.assign({},{text:area.name},{value:area.code}));
				// 							})
				// 						}
				// 					})
				// 				})
				// 			})
				// 		})
				// 		this.loadProdectList();
				// 		let time = 10;
				// 		let timer = setInterval(()=>{
				// 			console.log(this.time);
				// 			this.message = `数据请求中，剩余${this.time}s,请稍后...`
				// 			if(time == 0){
				// 				this.items = items;
				// 				uni.setStorageSync('screenData',items);
				// 				this.showScreen=true;
				// 				clearInterval(timer);
				// 				return
				// 			}
				// 			time--;
				// 			this.time = time;
				// 			// time == 0 ? ((this.items = items) && uni.setStorageSync('screenData',items) && (this.showScreen=true) && clearInterval(timer)) : (time-- && (this.time = time))
				// 		},1000)
				// 		// setTimeout(()=>{
				// 		// 	uni.setStorageSync('screenData',items);
				// 		// 	this.items = items;
				// 		// 	this.showScreen=true;
							
				// 		// },8000);
				// 		console.log(this.items);
				// 		console.log(this.arr)
				// 	}
				// })
			},
			loadProdectList() {//加载列表数据
				supervisionList(this.page).then((res)=> {
					if(res.code == 20000){
						this.total = res.data.total;
						this.screenData = res.data.records;
					}
				})
			},
			pageChange({type,current}) {
				this.page.pageNo = current;
				this.loadProdectList();
			},
			gotoProject(point) {
				if(point.longitude == null || point.latitude == null){
					uni.showToast({
						title: '项目无经纬度信息',
						icon: 'none'
					})
				}else{
					this.$root.$viewer.goView({
						longitude: Number(point.longitude),
						latitude: Number(point.latitude),
						height: 1000
					});
					this.$emit('closePopup', 'screen')
				}
			},
			reset(){
				this.items = [];
				this.items = uni.getStorageSync('screenData');
				this.page.districtCode = '';
				this.page.pageNo = 1;
				this.page.tenders = '';
				this.sectionName = '标段';
				this.page.buildPeriod = '';
				this.periodName = '期次';
				this.clearProvince();
				this.loadProdectList();
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.reset:active{color: blue;background-color: #eee;}
	.select /deep/ :last-child{
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
			font-size: 13px;
	}
	.selectArea /deep/ .selected-area{color: #888;}
	// .select /deep/ .uni-input-input{font-size: 13px;color: grey;}
	 .screen-popup{
		position: relative;
		height: 930rpx;
		background: rgba(5, 38, 102, .8);
		box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.6);
		border-radius: 10px 10px 0px 0px;
		>.data-loading{
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		>.screen{
			display: flex;
			flex-direction: column;
			height: 180rpx;
			padding: 15rpx 40rpx;
			color: #fff;
			box-sizing: border-box;
			>.header-top,.header-bottom{
				display: flex;
				justify-content: space-between;
				>.uni-data-tree{
					height: 30px;
					flex: 1;
				}
				>.center-tree{margin-right:2px;}
				>.uni-data-tree /deep/ .uni-data-tree-input ,.uni-data-tree /deep/ .input-value-border{
						height: 100%;
					}
				margin-top: 10px;
				>.select{
						border: 1px solid #aaa;
						border-radius: 5px;
						padding: 5px;
						display: flex;
						align-items: center;
						width: 120px;
						color: #aaa;
						position: relative;
						height: 30px;
						box-sizing: border-box;
				}
			}
			// justify-content: center;
			// align-items: center;
			// border-bottom: 1px solid #FFF;
			>.search-inp{
				flex: 1;
				height: 100%;
				padding-left: 10rpx;
				color: #fff;
				font-size: 28rpx;
				border: 1px solid #00FFFF;
			}
			>.search-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100%;
				border: 1px solid #00FFFF;
				border-left: none;
				i{
					color: #fff;
					font-size: 32rpx;
				}
			}
		}
		>.screen-list{
			padding: 0 60rpx;
			height: 760rpx;
			overflow: auto;
			>.search-list__item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #fff;
				font-size: 24rpx;
				border-bottom: 1px solid #133050;
				>text:first-child{
					width: 80%;
					height: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				>text:last-child{
					width: 20%;
					height: 100%;
					text-align: right;
				}
			}
		}
		>.search-page{
			position: absolute;
			bottom: 20rpx;
			display: flex;
			justify-content: center;
			width: 100%;
			/deep/ .uni-pagination__num-current-text{
				color: #fff;
			}
		}
	}
</style>
